import React from 'react'
import { Button, Form, Input,message } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import {Link,useNavigate} from 'react-router-dom'
import './less/Login.less'
import logoImg from '../assets/logo.jpg'
import {LoginApi} from '../request/api'

export default function Login() {
  //下面登录成功要跳转先1.声明Hooks  useNavigate
  const navigate = useNavigate()
  //登录成功
  const onFinish = (values) => {
    LoginApi({
      username: values.username,
      password: values.password
    }).then(res=>{
      console.log(res);
      if(res.errCode===0){
        message.success(res.message)
        //成功之后1.存储数据
        localStorage.setItem('avatar',res.data.avatar)
        localStorage.setItem('cms-token',res.data['cms-token'])
        localStorage.setItem('editable',res.data.editable)
        localStorage.setItem('player',res.data.player)
        localStorage.setItem('username',res.data.username)

        //2.跳转到根路径,设置完成之后登录时在浏览器Application查看数据是否存储
        setTimeout(()=>{
          navigate('/')
        },1500)
      }else{
        message.error(res.message)
      }
    })
  };

  return (
    <div className='login'>
      <div className='login_box'>
        <img src={logoImg}/>
      <Form
        name="basic"
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <Form.Item
          name="username"         
          rules={[
            {
              required: true,
              message: '请输入用户名!',
            },
          ]}
        >
          {/* placeholder.表单提示文字 */}
          <Input  
            size='large'
            prefix={<UserOutlined/>}
            placeholder="请输入用户名"/>
        </Form.Item>

        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: '请输入密码!',
            },
          ]}
        >
          <Input.Password 
            size='large'
            prefix={<LockOutlined/>}
            placeholder="请输入密码"/>
        </Form.Item>
        
        <Form.Item>
          <Link to="/register">没有账号？立即注册</Link>
        </Form.Item>

        <Form.Item>
          <Button size='large' type="primary" htmlType="submit" block>登录</Button>
        </Form.Item>
      </Form>
    </div>
    </div>
  )
}
